<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>  
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
      
    <title>My JSP 'showTeachers.jsp' starting page</title>  
      
    <meta http-equiv="pragma" content="no-cache">  
    <meta http-equiv="cache-control" content="no-cache">  
    <meta http-equiv="expires" content="0">      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="This is my page">  
    <!-- 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    -->  
        <link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" href="styles.css">  
    <script src="js/jquery-2.1.1.min.js" type="text/javascript">  
        </script>  
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>   
    <style>  
        #edit_teacher{  
            padding-right:15px;  
        }  
        #edit_teacher,#delete_teacher{  
            cursor:pointer;  
            display:none;  
        }  
    </style>  
  </head>  
    
  <body>  
     <div class="container">  
        <div id="nav_top">  
              
        </div>  
        <div id="table_teacher">  
          
    </div>  
    </div>  
      
    <br>  
  
  </body>  
    
  <script language="JavaScript">  
       var $table=$('<table class="table table-hover"></table>');  
    $(document).ready(function(){  
  
        $("#nav_top").load("nav/nav_top.jsp");  
        var s='${json}';    
        var s=eval("("+s+")");  
          
        createTable("table_teacher",s);  
    });  
      
      
      
        function createTable(div,s){  
       // var $table=$('<table class="table table-hover " id="table_teacher_main" style="table-layout:fixed"></table>');  
        $("div").append($table);  
        var $caption=$('<caption style="text-align:center;">jquery生成bootstrap表格</caption>');  
        $table.append($caption);  
        var $thead=$('<thead></thead>');  
        var $trs=$('<tr></tr>');  
        var $th1=$('<th>姓名</th>');  
        var $th2=$('<th>年龄</th>');  
        var $th3=$('<th>电话</th>');  
        var $th4=$('<th>操作</th>');  
        $trs.append($th1);  
        $trs.append($th2);  
          $trs.append($th3);  
         $trs.append($th4);  
        $thead.append($trs);  
        $table.append($thead);  
       for(var p=0;p<s.length;p++){  
         create_tbody(s[p].id,s[p].name,s[p].tel_phone);  
       }  
        
    }  
    function create_tbody(td1, td2, td3){  
        var $tr = $('<tr class="tr_content"></tr>');  
        $table.append($tr);  
        var $td1 = $('<td class="td_content1">' + td1 + '</td>');  
        $tr.append($td1);  
        var $td2 = $('<td class="td_content1">' + td2 + '</td>');  
        $tr.append($td2);  
        var $td3 = $('<td class="td_content1">' + td3 + '</td>');  
        $tr.append($td3);  
        var $td4 = $('<td width="10%"></td>');  
        var $edit = $('<span class="text-info edit_teacher" id="edit_teacher">编辑</span>');  
        var $delete = $('<span class="text-info delete_teacher" id="delete_teacher">删除</span>');  
        $td4.append($edit);  
        $td4.append($delete);  
        $tr.append($td4);  
        <span style="color:#009900;">$(document).on("mouseover", ".tr_content", function(){  
              
                $(this).children().each(function(){  
                    $(this).find("span").show();  
              
                });  
        });  
          
        $(document).on("mouseout", ".tr_content", function(){  
                $(this).children().each(function(){  
                    $(this).find("span").hide();  
                  
                });  
        });</span>  
    }  
          
          
     
  
      
 </script>  
</html> 